<template>
    <div class="maincontent">
        <el-form :inline="true" :model="form" label-width="90px">
            <div class="maintitle">测绘单位信息</div>
            <div class="formcontent">
                <div class="basicInformation">前期测绘单位：重庆东方测绘有限公司<span>测绘开始时间：2019-06-30</span><span>测绘完成时间：2019-08-30</span></div>
                <el-form-item label="项目负责人" label-width="82px" style="margin-right:60px;">
                    <el-select v-model="form.county" placeholder="所属区县">
                        <el-option label="区县一" value="shanghai"></el-option>
                        <el-option label="区县二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="前期测绘单位负责人" label-width="138px" style="margin-right:60px;">
                    <el-select v-model="form.county" placeholder="所属区县">
                        <el-option label="区县一" value="shanghai"></el-option>
                        <el-option label="区县二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="前期测绘技术负责人" label-width="138px">
                    <el-input v-model="form.timeLimit" style="width:200px;">
                        
                    </el-input>
                </el-form-item>
            </div>
            <div class="maintitle" style="margin-top:40px;">前期测绘基本信息</div>
            <div class="formcontent">
                <div class="basicInformationitem">图幅号：SH12346Q</div>
                <div style="clear:both;"></div>
                <div class="basicInformationitem">红线范围内总面积：112.5公顷</div>
                <div class="basicInformationitem">可实施总规模：112.5公顷</div>
                <div style="clear:both;"></div>
                <div class="basicInformationitem">可开发规模：112.5公顷</div>
                <div class="basicInformationitem">可整理规模：112.5公顷</div>
                <div class="basicInformationitem">可复垦规模：112.5公顷</div>
                <div style="clear:both;"></div>
                <el-form-item label="地貌类型" label-width="68px" style="margin-right:60px;">
                   <el-input v-model="form.timeLimit" style="width:200px;"></el-input>
                </el-form-item>
                <el-form-item label="土壤类型" label-width="68px" style="margin-right:60px;">
                    <el-input v-model="form.timeLimit" style="width:200px;"></el-input>
                </el-form-item>
                <el-form-item label="水源情况" label-width="68px">
                    <el-input v-model="form.timeLimit" style="width:200px;">
                        
                    </el-input>
                </el-form-item>
            </div>
            <div class="maintitle" style="margin-top:40px;">耕地分坡度级面积（公顷）</div>
            <div class="formcontent">
                <el-table
                    :data="tableData"
                    style="width: 100%">
                    <el-table-column
                        prop="type"
                        label="类型"
                        width="180">
                    </el-table-column>
                    <el-table-column
                        prop="name"
                        label="旱地面积"
                        width="180">
                    </el-table-column>
                    <el-table-column
                        prop="address"
                        label="旱地田坎系数">
                    </el-table-column>
                    <el-table-column
                        prop="date"
                        label="水田面积"
                        width="180">
                    </el-table-column>
                    <el-table-column
                        prop="name"
                        label="水田田坎系数"
                        width="180">
                    </el-table-column>
                    <el-table-column
                        prop="address"
                        label="其它草地面积">
                    </el-table-column>
                </el-table>
            </div>
            <div class="maintitle" style="margin-top:40px;">耕地分坡度级面积（公顷）</div>
            <div class="formcontent">
                <el-form-item label="前期测绘成果模板" label-width="128px">
                    <el-upload
                        class="upload-demo"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        :file-list="fileList"
                        :on-success="getreport"
                        >
                        <el-button size="small">上传</el-button>
                    </el-upload>
                </el-form-item>
                
            </div>
            <div>
                <el-form-item label="前期测绘成果" label-width="128px">
                    <el-upload
                        class="upload-demo"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        :file-list="fileList"
                        :on-success="getreport"
                        >
                        <el-button size="small">上传</el-button>
                    </el-upload>
                </el-form-item>
            </div>
            <div>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">提交</el-button>
                    <el-button>取消</el-button>
                </el-form-item>  
            </div>
            
        </el-form>
        
    </div>
</template>

<script>

export default {
    data() {
        return {
            form:{
                name:'',
                number:'',
                county:'',
                town:'',
                village:'',
                year:'1',
                level:'',
                type:'',
                pictureNumber:'',
                isHighStandard:'1',
                timeLimit:'',
                paybackPeriod:''

            },
            tableData:[{
                type:"0°-2°"
            },{
                type:"2°-6°"
            },{
                type:"6°-15°"
            },{
                type:"15°-20°"
            }],
            fileList:[]
        };
    },
    
    created() {
        
    },
    methods: {
        onSubmit(){

        },
        getreport(response, file, fileList){
            this.fileList = [];
            this.fileList.push(file)
        }
    }
};
</script>

<style lang="scss" scoped>
    .maincontent{
        padding: 30px 40px;
        .maintitle{
            font-size:18px;
            font-family:PingFang SC;
            font-weight:bold;
            line-height:25px;
            color: #4d4d4d;
        }
        .formcontent{
            margin-top: 30px;
            .basicInformation{
                font-size:14px;
                font-family:PingFang SC;
                font-weight:500;
                line-height:20px;
                color: #8c8c8c;
                margin-bottom: 20px;
                span{
                    margin-left: 60px;
                }
            }
            .basicInformationitem{
                font-size:14px;
                font-family:PingFang SC;
                font-weight:500;
                line-height:20px;
                color: #8c8c8c;
                float: left;
                width: 251px;
                margin-bottom:20px;
            }
        }
    }
</style>
 